<template>
    <div class="layout">
        <div class="pre">
            <div class="pre_title">
                <span class="title-text">点赞时间段</span>
                <el-button @click="export2Img(myRef_one, '点赞时段')">导出</el-button>
            </div>
            <div v-show="!isNoMessage1" id="echarts" ref="myRef_one" class="min"></div>
            <div v-show="isNoMessage1" class="no_data">
                <img class="no_img" src="@/assets/noData.png" alt="" />
                <div class="emty_title">暂无数据</div>
            </div>
        </div>
        <div class="pre">
            <div class="pre_title">
                <span class="title-text">评论时间段</span>
                <el-button @click="export2Img(myRef_two, '评论时段')">导出</el-button>
            </div>
            <div v-show="!isNoMessage2" id="echarts" ref="myRef_two" class="min"></div>
            <div v-show="isNoMessage2" class="no_data">
                <img class="no_img" src="@/assets/noData.png" alt="" />
                <div class="emty_title">暂无数据</div>
            </div>
        </div>
    </div>
    <div>
        <div class="pre pre_item">
            <div class="pre_title">
                <span class="title-text">客户标签</span>
                <el-button @click="export2Img(myRef_three, '客户标签')">导出</el-button>
            </div>
            <div v-show="!isNoMessage3" id="echarts" ref="myRef_three" class="min"></div>
            <div v-show="isNoMessage3" class="no_data">
                <img class="no_img" src="@/assets/noData.png" alt="" />
                <div class="emty_title">暂无数据</div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, inject, watch, nextTick } from 'vue';
import { export2Img } from '@/utils/utils';
import * as echarts from 'echarts';
const myRef_one = ref(null);
const isNoMessage1 = ref(false);
const myRef_two = ref(null);
const isNoMessage2 = ref(false);
const myRef_three = ref(null);
const isNoMessage3 = ref(false);
const props = defineProps(['commentData', 'upData', 'tagData']);
const earchList = ref([]);
const earchList1 = ref([]);
const earchList2 = ref([]);
let data1 = reactive({});
let data2 = reactive({});
//获取点赞占比数据
const getChart = async () => {
    earchList.value = [];
    for (const key in data1.time_type) {
        earchList.value.push({ value: '', name: data1.time_type[key] });
    }
    data1.ratio.forEach((item: any) => {
        earchList.value[item.time_type - 1].value = item.data;
    });
    if (data1.ratio.length == 0) {
        isNoMessage1.value = true;
        return;
    } else {
        isNoMessage1.value = false;
    }
    await nextTick();
    const myChart_one = echarts.init(myRef_one.value);
    myChart_one.setOption({
        series: [
            {
                type: 'pie',
                data: earchList.value,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: function (val: any) {
                                const data = earchList.value;
                                let total = 0;
                                let tarValue = 0;
                                for (let i = 0, l = data.length; i < l; i++) {
                                    total += Number(data[i].value);
                                    if (data[i].name == val.name) {
                                        tarValue = data[i].value;
                                    }
                                }
                                const p = ((tarValue / total) * 100).toFixed(2);
                                return val.name + ' ' + ' ' + p + '%';
                            }
                        },
                        labelLine: { show: true }
                    }
                },
                color: ['#ff0000', '#ff8364', '#ffb988', '#fde860', '#ffbe49', '#b50000'],
                radius: '50%'
            }
        ]
    });
    nextTick(() => {
        myChart_one.resize();
    });
    window.onresize = function () {
        myChart_one.resize();
    };
};
const getChart2 = async () => {
    earchList1.value = [];
    for (const key in data2.time_type) {
        earchList1.value.push({ value: '', name: data2.time_type[key] });
    }
    // if (Object.keys(data2).length != 0 && data2.ratio) {
    data2.ratio.forEach((item: any) => {
        earchList1.value[item.time_type - 1].value = item.data;
    });
    if (data2.ratio.length == 0) {
        isNoMessage2.value = true;
        return;
    } else {
        isNoMessage2.value = false;
    }
    // }
    await nextTick();
    const myChart_two = echarts.init(myRef_two.value);
    myChart_two.setOption({
        series: [
            {
                type: 'pie',
                data: earchList1.value,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: function (val: any) {
                                const data = earchList1.value;
                                let total = 0;
                                let tarValue = 0;
                                for (let i = 0, l = data.length; i < l; i++) {
                                    total += Number(data[i].value);
                                    if (data[i].name == val.name) {
                                        tarValue = data[i].value;
                                    }
                                }
                                const p = ((tarValue / total) * 100).toFixed(2);
                                return val.name + ' ' + ' ' + p + '%';
                            }
                        },
                        labelLine: { show: true }
                    }
                },
                color: ['#4cb050', '#259888', '#fcc108', '#feeb3c', '#cddc39', '#8bc24a'],
                radius: '50%'
            }
        ]
    });
    nextTick(() => {
        myChart_two.resize();
    });
    window.onresize = function () {
        myChart_two.resize();
    };
};
const getChart3 = async (data: any) => {
    if (data.length == 0) {
        isNoMessage3.value = true;
        return;
    } else {
        isNoMessage3.value = false;
    }
    earchList2.value = JSON.parse(JSON.stringify(data));
    earchList2.value.forEach((item: any) => {
        delete item.itemStyle;
        delete item.label;
    });
    await nextTick();
    const myChart_three = echarts.init(myRef_three.value);
    myChart_three.setOption({
        series: [
            {
                type: 'pie',
                data: earchList2.value,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: function (val: any) {
                                const data = earchList2.value;
                                let total = 0;
                                let tarValue = 0;
                                for (let i = 0, l = data.length; i < l; i++) {
                                    total += Number(data[i].value);
                                    if (data[i].name == val.name) {
                                        tarValue = data[i].value;
                                    }
                                }
                                const p = ((tarValue / total) * 100).toFixed(2);
                                return val.name + ' ' + ' ' + p + '%';
                            }
                        },
                        labelLine: { show: true }
                    }
                },
                color: ['#4cb050', '#259888', '#fcc108', '#feeb3c', '#cddc39', '#8bc24a'],
                radius: '50%'
            }
        ]
    });
    nextTick(() => {
        myChart_three.resize();
    });
    window.onresize = function () {
        myChart_three.resize();
    };
};
// 点赞占比
watch(
    () => props.upData,
    val => {
        data1 = val;
        getChart();
    },
    { deep: true }
);
//评论占比
watch(
    () => props.commentData,
    val => {
        data2 = val;
        getChart2();
    },
    { deep: true }
);
watch(
    () => props.tagData,
    val => {
        getChart3(val);
    },
    { deep: true }
);
</script>
<style lang="scss" scoped>
.layout {
    width: 100%;
    margin-top: 16px;
    display: flex;
    justify-content: space-between;

    .pre {
        width: 49.5%;
        height: 546px;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #eaeaea;

        &_title {
            padding: 12px 24px;
            border-bottom: 1px solid #eaeaea;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .title-text {
            font-size: 16px;
            font-weight: 500;
        }

        .min {
            height: 100%;
        }
    }

    .pre_item {
        width: 100%;
        margin-top: 16px;
    }

    .no_data {
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .no_img {
            margin-left: 35px;
        }

        .emty_title {
            color: #909399;
            margin: 0;
        }
    }
}
</style>
